<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="system-user-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item label="用户名：">
							<el-input v-model="dataForm.username"></el-input>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch()">查询</el-button></el-form-item>
				</el-form>	
			</div>
			<div class="system-user-content">
				<div class="leftpart">用户列表</div>
				<el-button 
				 v-if="getAuthClick('system-user-create')"
				type="primary"
				size="small"
				plain
				icon="Share" @click="toAddUser()">新建</el-button>
			</div>
			<el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
				<el-table-column  label="头像" align="center" width="100px">
					<template #default="scope">
						<div style="width:50px;height:50px;">
							<img v-if="scope.row.avatar_url" style="width: 50px;height:50px" :src="scope.row.avatar_url" alt="">
							<img v-if="!scope.row.avatar_url" style="width: 50px;height:50px" src="https://test.scdeyao.com/uploadfiles/tmp/5228d43f89f768317cfacda7723e420c.jpeg" alt="">
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="username" label="用户名" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="mobile" align="center" label="手机号码" show-overflow-tooltip></el-table-column>
				<el-table-column prop="email" align="center" label="电子邮箱" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updated_at" label="更新时间" align="center" />
				<el-table-column  label="状态" align="center">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.enabled==1">启用</el-tag>
						<el-tag type="info" v-if="scope.row.enabled==0">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div>
							<el-link @click="toEdit(scope.row)" v-if="showUpdataClick" type="primary">编辑</el-link>
							<el-link style="margin-left:10px" @click="onDetails(scope.row)"   type="success">详情</el-link>
							<el-link v-if="scope.row.username!='admin'&&showDeleteClick" style="margin-left:10px" @click="onDelect(scope.row)" type="danger">删除</el-link>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</div>
		<detailsDialog ref="detailDialog"></detailsDialog>
	</div>
</template>

<script lang="ts" setup>
	import { defineAsyncComponent,ref,reactive,onMounted} from "vue"
	import { usermanegeApi } from "/@/api/system/usermanege/index";
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { useRouter } from 'vue-router';
	import { systemStore } from "/@/stores/system";

	import {useUserInfo} from "/@/stores/userInfo"

const userInfo = useUserInfo();
const permissions=userInfo.userInfos.permissions
// 判断是否存在组件userInfo.userInfos.permissions
const getAuthClick=(set:string)=>{
	let sert=permissions.findIndex((item)=>
	item==set
)

return sert>=0?true:false
}
 const showUpdataClick=ref(getAuthClick('system-user-update'))
 const showDeleteClick=ref(getAuthClick('system-user-delete'))

	const syStore = systemStore()
	const detailsDialog = defineAsyncComponent(() => import('/@/views/system/usermanege/detailsDialog.vue'));
	const router = useRouter()
	const userApi = usermanegeApi()
	const dataForm = ref({
		username:"",
		page:1,
		limit:10,
		orderby: "created_at:desc",
	})
	const total =ref(0)
	const tableData = reactive({
		data:[],
		loading:false
	})
	const detailDialog = ref(null)
	// 查询
	const onSearch = ()=>{
		getTableList()
	}
	const handleCurrentChange = (val:number)=>{
		dataForm.value.page = val
		getTableList()
	}
	// 获取数据
	const getTableList = (async ()=>{
		tableData.loading = true
		dataForm.value.search= `username:${dataForm.value.username}:like`
		let res = await userApi.getUserList(dataForm.value);
		
		if(res.isSuccess){
			tableData.data = res.returnData.data;
			total.value = res.returnData.total
			tableData.loading = false
		}
	})
	// 编辑
	const toEdit =(row:object)=>{
		router.push({
			path:'/system/usermanege/createdUser',
			query:{
				id:row.id
			}
		})
	}
	// 跳转到添加用户页面‘
	const toAddUser = ()=>{
		router.push('/system/usermanege/createdUser')
	}
	// 详情
	const onDetails = (row:object)=>{
		syStore.userFlag = true
		syStore.userId = row.id
		detailDialog.value.getDetails()
	}
	// 删除
	const onDelect = (async (row:object)=>{
		ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
	.then(async ()=>{
			let res = await userApi.deleteUser({id:row.id});
			if(res.isSuccess){
				ElMessage.success('删除成功');
				getTableList()
			}else{
				ElMessage.error('删除失败')
			}
		})
	})

	onMounted(()=>{
		getTableList()
	})
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
.leftpart{
	font-size: 18px;
}
.system-user-content{
	height: 60px;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
}
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}
</style>